<template>
    <div>
        <t-layout>
            <t-aside :width="settingStore.sidebarCollapsed ? '64px' : '232px'"><layout-side-nav /></t-aside>
            <t-layout class="right-layout">
                <t-header><layout-header /></t-header>
                <t-content><layout-content /></t-content>
            </t-layout>
        </t-layout>
    </div>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/store';
import LayoutContent from './components/LayoutContent.vue';
import LayoutHeader from './components/LayoutHeader.vue';
import LayoutSideNav from './components/LayoutSideNav.vue';
const settingStore = useSettingStore();

</script>

<style scoped>
.right-layout {
    transition: margin-left 0.3s;
}

:deep(.t-layout__sider) {
    transition: width 0.3s;
}
</style>
